<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">

    <title>Contact</title>
    <!-- web fonts -->
    <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700,800,900&display=swap"
          rel="stylesheet">
    <!-- //web fonts -->
    <!-- Template CSS -->
    <link href="assets/css/style-starter.css" rel="stylesheet">
</head>
<body>
<div class="w3l-bootstrap-header fixed-top">
    <nav class="navbar navbar-expand-lg navbar-light p-2">
        <div class="container">
            <a class="navbar-brand" href="index.html"><span class="fa fa-diamond"></span>Market</a>
            <!-- if logo is image enable this
          <a class="navbar-brand" href="#index.html">
              <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
          </a> -->
            <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
                    data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
                <div class="form-inline">
                    <a class="login mr-4" href="#login.html">Log in</a>
                    <a class="btn btn-primary btn-theme" href="#signup.html">Create Free Account</a>
                </div>
            </div>
        </div>
    </nav>
</div>
<!-- contacts -->
<section class="w3l-contact mt-5">
    <div class="contacts-9 py-5 mt-5">
        <div class="container py-lg-3">
            <div class="row top-map">
                <div class="cont-details col-md-5">
                    <div class="heading mb-lg-4 mb-4">
                        <h3 class="head">Contact us </h3>
                    </div>
                    <div class="cont-top">
                        <div class="cont-left">
                            <span class="fa fa-phone"></span>
                        </div>
                        <div class="cont-right">
                            <p><a href="tel:+44-99-555-42">+44-99-555-42</a></p>

                        </div>
                    </div>
                    <div class="cont-top mt-4">
                        <div class="cont-left">
                            <span class="fa fa-envelope-o"></span>
                        </div>
                        <div class="cont-right">
                            <p><a class="mail" href="mailto:mailid@mail.com">mailid@mail.com</a></p>
                        </div>
                    </div>
                    <div class="cont-top mt-4">
                        <div class="cont-left">
                            <span class="fa fa-map-marker"></span>
                        </div>
                        <div class="cont-right">
                            <p>Market Business, 208 Trainer Avenue street, Illinois, UK - 62617.</p>
                        </div>
                    </div>
                </div>
                <div class="map-content-9 col-md-7 mt-5 mt-md-0">
                    <form action="https://sendmail.w3layouts.com/submitForm" method="post">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label class="contact-textfield-label" for="w3lName">First Name</label>
                                <input class="form-control" id="w3lName" name="w3lName" placeholder="" required=""
                                       type="text">
                            </div>
                            <div class="col-md-6 mt-md-0 mt-3">
                                <label class="contact-textfield-label" for="w3lName">Last Name</label>
                                <input class="form-control" name="w3lName" placeholder="" required="" type="text">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label class="contact-textfield-label" for="w3lSender">Your Email ID</label>
                                <input class="form-control" id="w3lSender" name="w3lSender" placeholder="" required=""
                                       type="email">
                            </div>
                            <div class="col-md-6 mt-md-0 mt-3">
                                <label class="contact-textfield-label" for="w3lPhone">Phone Number</label>
                                <input class="form-control" id="w3lPhone" name="w3lPhone" placeholder="" required=""
                                       type="tel">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="contact-textfield-label" for="w3lSubject">Subject</label>
                            <input class="form-control" id="w3lSubject" name="w3lSubject" placeholder="" required=""
                                   type="text">
                        </div>
                        <div class="form-group">
                            <label class="contact-textfield-label" for="w3lMessage">Message</label>
                            <textarea class="form-control" id="w3lMessage" name="w3lMessage" placeholder=""
                                      required=""></textarea>
                        </div>
                        <button class="btn btn-primary btn-contact" type="submit">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="map">
        <iframe
                allowfullscreen=""
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.3059445135!2d-74.25986613799748!3d40.69714941774136!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m3!3e3!4m0!4m0!5e0!3m2!1sen!2sin!4v1570181661801!5m2!1sen!2sin"></iframe>
    </div>
</section>
<!-- //contacts -->
<!-- footer-28 block -->
<section class="w3l-market-footer">
    <footer class="footer-28">
        <div class="footer-bg-layer">
            <div class="container py-lg-3">
                <div class="row footer-top-28">
                    <div class="col-md-6 footer-list-28 mt-5">
                        <h6 class="footer-title-28">Contact information</h6>
                        <ul>
                            <li>
                                <p><strong>Address</strong> : #135 block, Barnard St. Brooklyn, NY 10036, USA</p>
                            </li>
                            <li>
                                <p><strong>Phone</strong> : <a href="tel:+404-11-22-89">+404-11-22-89</a></p>
                            </li>
                            <li>
                                <p><strong>Email</strong> : <a href="mailto:example@mail.com">example@mail.com</a></p>
                            </li>
                        </ul>

                        <div class="main-social-footer-28 mt-3">
                            <ul class="social-icons">
                                <li class="facebook">
                                    <a href="#link" title="Facebook">
                                        <span aria-hidden="true" class="fa fa-facebook"></span>
                                    </a>
                                </li>
                                <li class="twitter">
                                    <a href="#link" title="Twitter">
                                        <span aria-hidden="true" class="fa fa-twitter"></span>
                                    </a>
                                </li>
                                <li class="dribbble">
                                    <a href="#link" title="Dribbble">
                                        <span aria-hidden="true" class="fa fa-dribbble"></span>
                                    </a>
                                </li>
                                <li class="google">
                                    <a href="#link" title="Google">
                                        <span aria-hidden="true" class="fa fa-google"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-4 footer-list-28 mt-5">
                                <h6 class="footer-title-28">Company</h6>
                                <ul>
                                    <li><a href="about.html">About</a></li>
                                    <li><a href="#blog.html">Blog Posts</a></li>
                                    <li><a href="#pricing.html">FAQ</a></li>
                                    <li><a href="#pricing.html">Pricing</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4 footer-list-28 mt-5">
                                <h6 class="footer-title-28">Support</h6>
                                <ul>
                                    <li><a href="contact.html">Contact Us</a></li>
                                    <li><a href="#signup.html">Create account</a></li>
                                    <li><a href="#learn.html">Learning Center</a></li>
                                    <li><a href="#career.html">Team</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4 footer-list-28 mt-5">
                                <h6 class="footer-title-28">Product</h6>
                                <ul>
                                    <li><a href="#URL">Market</a></li>
                                    <li><a href="#URL">VIP</a></li>
                                    <li><a href="#URL">Resources</a></li>
                                    <li><a href="#URL">Sale</a></li>
                                    <li><a href="#URL">Admin UI</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="midd-footer-28 align-center py-lg-4 py-3 mt-5">
                <div class="container">
                    <p class="copy-footer-28 text-center">Copyright &copy; 2020.Company name All rights reserved.<a
                            href="http://sc.chinaz.com/moban/" target="_blank">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                </div>
            </div>
        </div>
    </footer>

    <!-- move top -->
    <button id="movetop" onclick="topFunction()" title="Go to top">
        &#10548;
    </button>
    <script>
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("movetop").style.display = "block";
            } else {
                document.getElementById("movetop").style.display = "none";
            }
        }

        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    </script>
    <!-- /move top -->
</section>
<!-- //footer-28 block -->

<!-- jQuery, Bootstrap JS -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- Template JavaScript -->

<script src="assets/js/owl.carousel.js"></script>

<!-- script for owlcarousel -->
<script>
    $(document).ready(function () {
        $('.owl-one').owlCarousel({
            loop: true,
            margin: 0,
            nav: true,
            responsiveClass: true,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: false,
            responsive: {
                0: {
                    items: 1,
                    nav: false
                },
                480: {
                    items: 1,
                    nav: false
                },
                667: {
                    items: 1,
                    nav: true
                },
                1000: {
                    items: 1,
                    nav: true
                }
            }
        })
    })
</script>
<!-- //script for owlcarousel -->

<!-- disable body scroll which navbar is in active -->
<script>
    $(function () {
        $('.navbar-toggler').click(function () {
            $('body').toggleClass('noscroll');
        })
    });
</script>
<!-- disable body scroll which navbar is in active -->

<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script>
    $(document).ready(function () {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',

            fixedContentPos: false,
            fixedBgPos: true,

            overflowY: 'auto',

            closeBtnInside: true,
            preloader: false,

            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

        $('.popup-with-move-anim').magnificPopup({
            type: 'inline',

            fixedContentPos: false,
            fixedBgPos: true,

            overflowY: 'auto',

            closeBtnInside: true,
            preloader: false,

            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-slide-bottom'
        });
    });
</script>

</body>
</html>